<template>
  <div class="insertgamecomp" v-loading="loading">
    <div class="insertitem">
      <div class="insertlable">游戏名称</div>
      <div>
        <el-input v-model="gameName" placeholder="请输入内容"></el-input>
      </div>
    </div>

    <div class="insertitem">
      <div class="insertlable">游戏类别</div>
      <div class="elselect">
        <el-select v-model="values" placeholder="请选择">
          <el-option
            v-for="item in category"
            :key="item.gtId"
            :label="item.gtName"
            :value="item.gtId"
          >
          </el-option>
        </el-select>
      </div>
    </div>

    <div class="insertitem">
      <div class="insertlable">游戏地区</div>
      <div class="elselect">
        <el-select v-model="duqu" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.label"
          >
          </el-option>
        </el-select>
      </div>
    </div>

    <div class="insertitem">
      <div class="insertlable">开发厂商</div>
      <div class="elselect">
        <el-input v-model="gjDeveloper" placeholder="请输入内容"></el-input>
      </div>
    </div>
    <div class="insertitem">
      <div class="insertlable">运营厂商</div>
      <div class="elselect">
        <el-input v-model="gjOperator" placeholder="请输入内容"></el-input>
      </div>
    </div>
    <div class="insertitem">
      <div class="insertlable">游戏大小</div>
      <div class="elselect">
        <el-input v-model="gjSize" placeholder="请输入内容"></el-input>
      </div>
    </div>
    <div class="insertitem">
      <div class="insertlable">当前版本</div>
      <div class="elselect">
        <el-input v-model="gjEdition" placeholder="请输入内容"></el-input>
      </div>
    </div>

    <div class="insertitem">
      <div class="insertlable">游戏介绍</div>
      <div>
        <el-input
          type="textarea"
          :rows="2"
          placeholder="请输入内容"
          v-model="textarea"
        >
        </el-input>
      </div>
    </div>

    <div class="insertitem">
      <div class="insertlable">开发者说</div>
      <div>
        <quill-editor :options="editorOption" v-model="says">> </quill-editor>
      </div>
    </div>

    <div class="insertitem">
      <div class="insertlable">游戏简介</div>
      <div>
        <quill-editor :options="editorOption" v-model="synopsis"
          >>
        </quill-editor>
      </div>
    </div>

    <div class="insertitem">
      <div class="insertlable">游戏图标</div>

      <el-upload
        ref="iconImg"
        action="string"
        :limit="1"
        :file-list="fileicoImg"
        :http-request="insertImg"
        list-type="picture-card"
        :on-preview="handlePictureCardPreview"
        :on-remove="removeIconImg"
      >
        <i class="el-icon-plus"></i>
      </el-upload>
      <el-dialog :visible.sync="dialogVisible">
        <img width="100%" src="dialogImageUrl" alt="" />
      </el-dialog>
    </div>

    <div class="insertitem">
      <div class="insertlable">游戏背景</div>

      <el-upload
        ref="iconImg"
        action="string"
        :limit="1"
        :file-list="filebgImg"
        :http-request="insertImgbg"
        list-type="picture-card"
        :on-preview="handlePictureCardPreview"
        :on-remove="removeIconImg"
      >
        <i class="el-icon-plus"></i>
      </el-upload>
      <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="" />
      </el-dialog>
    </div>

    <div class="insertitem">
      <div class="insertlable">游戏图片</div>

      <el-upload
        ref="pictureUpload"
        action="string"
        :file-list="fileimgs"
        :http-request="insertImgs"
        list-type="picture-card"
        :limit="5"
        :on-preview="handlePictureCardPreview"
        :on-remove="handleRemove"
      >
        <i slot="default" class="el-icon-plus"></i>
        <div slot="file" slot-scope="{ file }">
          <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
          <span class="el-upload-list__item-actions">
            <span
              class="el-upload-list__item-preview"
              @click="handlePictureCardPreview(file)"
            >
              <i class="el-icon-zoom-in"></i>
            </span>
            <span
              v-if="!disabled"
              class="el-upload-list__item-delete"
              @click="handleRemove(file)"
            >
              <i class="el-icon-delete"></i>
            </span>
          </span>
        </div>
      </el-upload>
      <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="" />
      </el-dialog>
    </div>

    <div class="insertitem">
      <div class="complete">
        <el-button @click="complete" type="primary">{{ completes }}</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import {
  insertGameImg,
  insertGame,
  getGameInformationById,
  updateGame,
} from "../../network/admin";
import { getCategory } from "../../network/gameCategory";

import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";

import { quillEditor } from "vue-quill-editor";

const toolbarOptions = [
  ["bold", "italic", "underline", "strike"], //加粗，斜体，下划线，删除线
  [{ header: 1 }, { header: 2 }], // 标题，键值对的形式；1、2表示字体大小
  [{ list: "ordered" }, { list: "bullet" }], //列表
  [{ script: "sub" }, { script: "super" }], // 上下标
  [{ indent: "-1" }, { indent: "+1" }], // 缩进
  [{ direction: "rtl" }], // 文本方向
  [{ size: ["small", false, "large", "huge"] }], // 字体大小
  [{ align: [] }], //对齐方式
];

export default {
  name: "InsertGameComp",
  components: {
    quillEditor,
  },
  data() {
    return {
      gameName: "",
      values: "",
      says: "",
      category: "",
      synopsis: "",
      textarea: "",
      gjDeveloper: "",
      gjSize: "",
      gjOperator: "",
      gjEdition: "",
      icoImg: "",
      bgImg: "",
      imgs: [],
      insterImgs: "",
      index: "",
      editorOption: {
        modules: {
          toolbar: toolbarOptions, // 自定义工具栏，与上面定义的toolbarOptions 相对应
        },
        theme: "snow", //主题
        placeholder: "请输入正文",
      },
      options: [
        {
          value: "选项1",
          label: "国内",
        },
        {
          value: "选项2",
          label: "国外",
        },
      ],
      duqu: "",
      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false,
      fileicoImg: [],
      filebgImg: [],
      fileimgs: [],
      completes: "完成",
      giId: this.$route.query.giId,
      loading: false,
    };
  },

  created() {
    this.getCate();
    if (this.giId != undefined) {
      this.completes = "修改";
      this.getGameList();
    }
  },

  methods: {
    getCate() {
      getCategory().then((res) => {
        this.category = res.data.data;
      });
    },

    getGameList() {
      getGameInformationById(this.giId).then((res) => {
        this.loading = false;
        this.gameName = res.data.data.giName;
        this.values = res.data.data.gtId;
        this.duqu = res.data.data.giArea;
        this.gjDeveloper = res.data.data.gjDeveloper;
        this.gjOperator = res.data.data.gjOperator;
        this.gjSize = res.data.data.gjSize;
        this.gjEdition = res.data.data.gjEdition;
        this.textarea = res.data.data.giIntroduce;
        this.says = res.data.data.giDetails;
        this.synopsis = res.data.data.giTitle;
        let icoImgCun = [
          {
            url: res.data.data.giLogo,
          },
        ];
        this.fileicoImg = icoImgCun;
        let bgImgCun = [
          {
            url: res.data.data.giBackdrop,
          },
        ];
        this.filebgImg = bgImgCun;

        let imgsCun = [];
        for (let i = 0; i < res.data.data.giList.length; i++) {
          let imgsObj = { url: "" };
          imgsObj.url = res.data.data.giList[i];
          imgsCun.push(imgsObj);
          console.log(i);
        }
        this.fileimgs = imgsCun;
        console.log(imgsCun);
      });
    },

    insertImg(file) {
      let params2 = new FormData();
      params2.append("files", file.file);
      insertGameImg(params2).then((res) => {
        this.icoImg = res.data.data[0];
        console.log(this.icoImg);
      });
    },

    insertImgbg(file) {
      let params2 = new FormData();
      params2.append("files", file.file);
      insertGameImg(params2).then((res) => {
        this.bgImg = res.data.data[0];
        console.log(this.bgImg);
      });
    },

    insertImgs(file) {
      let params = new FormData();
      params.append("files", file.file);
      insertGameImg(params)
        .then((res) => {
          this.imgs.push(...res.data.data);
          console.log(this.imgs);
        })
        .catch((err) => {
          console.log(err);
        });
    },

    removeIconImg(file) {
      let uploadFiles = this.$refs.iconImg.uploadFiles;
      for (let i = 0; i < uploadFiles.length; i++) {
        if (uploadFiles[i]["url"] == file.url) {
          uploadFiles.splice(i, 1);
        }
      }
    },

    handleRemove(file) {
      let uploadFiles = this.$refs.pictureUpload.uploadFiles;
      console.log(uploadFiles);
      for (let i = 0; i < uploadFiles.length; i++) {
        if (uploadFiles[i]["url"] == file.url) {
          uploadFiles.splice(i, 1);
          this.index = i;
          if (this.fileimgs.length > 0) {
            this.fileimgs.splice(i, 1);
          }
          if (this.fileimgs.length > 0 && i > this.fileimgs.length - 1)
            console.log(i);
          this.imgs.splice(i, 1);
        }
      }
    },

    handlePictureCardPreview(file) {
      console.log(file);
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },

    complete() {
      this.loading = true;
      for (let j = 0; j < this.fileimgs.length; j++) {
        this.insterImgs += this.fileimgs[j].url + ",";
      }

      for (let i = 0; i < this.imgs.length; i++) {
        if (i == this.imgs.length - 1) {
          this.insterImgs += this.imgs[i];
        } else {
          this.insterImgs += this.imgs[i] + ",";
        }
      }

      console.log(this.insterImgs);
      if (this.giId == undefined || this.giId == null) {
        insertGame(
          this.duqu,
          this.bgImg,
          this.says,
          this.textarea,
          this.icoImg,
          this.gameName,
          this.synopsis,
          this.gjDeveloper,
          this.gjEdition,
          this.gjOperator,
          this.gjSize,
          this.insterImgs,
          this.values
        )
          .then(() => {
            this.loading = true;
            this.$alert("添加成功", "提示", {
              confirmButtonText: "确定",
              callback: () => {
                location.reload();
              },
            });
          })
          .catch((res) => {
            console.log(res);
            this.loading = false;
            this.$alert("添加失败", "提示", {
              confirmButtonText: "确定",
            });
          });
      } else {
        if (this.icoImg == "") {
          this.icoImg = this.fileicoImg[0].url;
        }
        if (this.bgImg == "") {
          this.bgImg = this.filebgImg[0].url;
        }
        console.log(this.insterImgs);
        updateGame(
          this.duqu,
          this.bgImg,
          this.says,
          this.giId,
          this.textarea,
          this.icoImg,
          this.gameName,
          this.synopsis,
          this.gjDeveloper,
          this.gjEdition,
          this.gjOperator,
          this.gjSize,
          this.insterImgs,
          this.values
        )
          .then((res) => {
            this.loading = true;
            this.$alert("修改成功", "提示", {
              confirmButtonText: "确定",
              callback: () => {
                this.$router.push("gamelist");
              },
            });
            console.log(res);
          })
          .catch((res) => {
            console.log(res);
            this.loading = false;
            this.$alert("修改失败", "提示", {
              confirmButtonText: "确定",
            });
          });
      }

      this.insterImgs = "";
    },
  },
};
</script>

<style>
@import url("../../assets/css/quilleditor.css");
.insertgamecomp {
  width: 100%;
}
.insertitem {
  display: flex;
  align-items: center;
  margin-left: 1rem;
  margin-top: 0.2rem;
  font-size: 0.1rem;
}

.insertlable {
  margin-right: 0.2rem;
}

.elselect {
  width: 1rem;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  transform: translateY(40%);
  font-size: 20px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  text-align: center;
}
.avatar {
  width: 120px;
  height: 120px;
  display: block;
}

.complete {
  width: 65%;
  text-align: center;
  margin-top: 0.3rem;
}

.complete button {
  width: 200px;
}
</style>